<template>
  <ui-file-list
    display-type="list"
    :editable="editable"
    :data="fileList"
    :show-status="autoUpload"
    @remove-file="handleRemoveFile"
  />
</template>
<script>
import UiFileList from '../file-list'

export default {
  name: 'UiUploadSeparateShowcate',
  components: {
    UiFileList
  },
  inject: ['UiUploadSeparateProvide'],
  computed: {
    fileList () {
      return this.UiUploadSeparateProvide.fileList || []
    },
    editable () {
      return this.UiUploadSeparateProvide.editable
    },
    autoUpload () {
      return this.UiUploadSeparateProvide.autoUpload
    }
  },
  methods: {
    handleRemoveFile ({ file }) {
      MessageBox.confirm('确定删除此文件吗？').then(() => {
        this.UiUploadSeparateProvide.removeFile(file.id)
      })
    }
  }
}
</script>
